<template>
  <div>

    <table>
      <tr v-for="i in dlist">
        <td>{{i.name}}</td>
        <td>{{i.shouji}}</td>
        <td><img :src="'http://127.0.0.1:8000/'+ i.text" alt=""></td>
      </tr>
    </table>

    <button @click="fen(lastpage)" v-show="lastpage">上一页</button>
    当前页 ： {{page}}
    <br>
    总页数：{{all}}

    <!--<ul>-->
       <!--<li v-for="index in all">-->
         <!--<a @click="fen(index)">{{ index }}</a>-->
       <!--</li>-->
    <!--</ul>-->
    <button @click="fen(nextpage)" v-show="nextpage">下一页</button>

  </div>

</template>

<script>
    export default {
        name: "dinglist",
      data:function () {
        return{
          dlist:[],

          // 自主分页
          total:0, //商品总数
          page:1,//当前页
          all:0,//总页数
          lastpage:0,//上一页
          nextpage:0,//下一页
          size:2, //每页显示数量
        }
      },
      mounted:function(){
        this.ding();

        this.fen(1);
      },
      methods: {
        fen: function (page) {
          // //分页手动赋值
          this.page=page;

          this.axios({
            url: 'http://127.0.0.1:8000/dinglist/',
            method: 'get',
            params: {page: page, size: this.size}
          }).then(res => {
            this.dlist = res.data.data;
            // console.log(res);

            //判断上一页
            if (page === 1) {
              this.lastpage = 0
            } else {
              this.lastpage = page - 1;
            }

            //计算总页数
            this.all = Math.ceil(res.data.total / this.size);

            //判断下一页
            if (page === this.all) {
              this.nextpage = 0;
            } else {
              this.nextpage = page + 1;
            }

          })
        },

        ding:function () {
          this.axios({
            url: 'http://127.0.0.1:8000/dinglist/',
            method: 'get',
            params: {page: this.page, size: this.size}
          }).then(res => {
            this.dlist = res.data.data;
            console.log(res.data.total)
          })
        },


      }
    }
</script>

<style scoped>

</style>
